<template>
  <div>
    <div>
      <el-select v-model="value" placeholder="请选择您要查看的年级">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-button type="primary" @click="go()">导出报告</el-button>
    </div>
    <StatisticsItem title="完成情况" subtitle="反映学生当前的生涯测评完成度，建议确保90%以上的完成度才能获得准确分析结果">
      <div slot="graph">
        <CirclePie cid="1" />
      </div>
    </StatisticsItem>
    <StatisticsItem title="意向专业选择排名" subtitle="反映学生当前的生涯测评完成度，建议确保90%以上的完成度才能获得准确分析结果">
      <div slot="graph">
        <LinearGradientBar cid="1" :data="LinearGradientData" />
        <el-button type="small">展开更多</el-button>
      </div>
    </StatisticsItem>
    <StatisticsItem title="优势科目人数比" subtitle="反映学生当前的生涯测评完成度，建议确保90%以上的完成度才能获得准确分析结果">
      <div slot="graph">
        <el-row :gutter="20">
          <el-col :span="8">
            <PieChart cid="1" title="第一优势科目" />
          </el-col>
          <el-col :span="8">
            <PieChart cid="2" title="第二优势科目" />
          </el-col>
          <el-col :span="8">
            <PieChart cid="3" title="第三优势科目" />
          </el-col>
        </el-row>
      </div>
    </StatisticsItem>
    <StatisticsItem title="最佳选课方案排名" subtitle="反映学生当前的生涯测评完成度，建议确保90%以上的完成度才能获得准确分析结果">
      <div slot="graph">
        <LinearGradientBar
          cid="3"
          :data="LinearGradientData2"
          color0="#D4FC79"
          color1="#96E6A1"
          :opacity="1"
          :orient="false"
          :sub="3"
          sub-color0="#EEF2F3"
          sub-color1="#BAC4CC"
        />
      </div>
    </StatisticsItem>
    <StatisticsItem title="科目资源投放排序建议" subtitle="反映学生选择意向专业排名情况，用于了解学生对更全面意向专业的选择热度，更准确对接相关院校">
      <div slot="graph">
        <LinearGradientBar cid="2" :data="LinearGradientData2" color0="#BB9BF1" color1="#887BF2" :opacity="0.7" />
      </div>
    </StatisticsItem>
  </div>
</template>

<style scoped>
  h2>span {
    color: #8c939d;
    font-size: 12px;
  }
</style>

<script>
// import LineChart from '../../components/Chart/line'
// import RadarChart from '../../components/Chart/radar'
import PieChart from '../../components/Chart/pie'
// import BarYCategoryStack from '../../components/Chart/BarYCategoryStack'
import CirclePie from '../../components/Chart/CirclePie'
import LinearGradientBar from '../../components/Chart/LinearGradientBar'
import StatisticsItem from './components/statistics-item'
export default {
  components: {
    // LineChart: LineChart,
    // RadarChart: RadarChart,
    // BarYCategoryStack: BarYCategoryStack,
    LinearGradientBar: LinearGradientBar,
    CirclePie: CirclePie,
    StatisticsItem: StatisticsItem,
    PieChart: PieChart
  },
  data() {
    return {
      LinearGradientData2: [
        {
          value: 3222,
          label: '化学'
        },
        {
          value: 899,
          label: '历史'
        },
        {
          value: 1233,
          label: '生物'
        },
        {
          value: 766,
          label: '地理'
        },
        {
          value: 222,
          label: '政治'
        },
        {
          value: 189,
          label: '物理'
        }
      ],
      LinearGradientData: [
        {
          value: 1,
          label: '公共管理类'
        },
        {
          value: 2,
          label: '公共管理类1'
        },
        {
          value: 3,
          label: '公共管理类2'
        },
        {
          value: 4,
          label: '公共管理类3'
        },
        {
          value: 5,
          label: '公共管理类4'
        }
      ],
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      value: ''
    }
  },
  methods: {
    go() {
      this.$router.push('/statistics/career/complex')
    }
  }
}
</script>
